<template>
    <div class="video-image-list-container">
        <!-- 搜索筛选区域 -->
        <div class="search-section">
            <el-card shadow="never" class="search-card">
                <div class="search-content">
                    <div class="search-left">
                        <el-form :model="searchForm" :inline="true" class="search-form">
                            <el-form-item label="标题:">
                                <el-input 
                                    v-model="searchForm.title" 
                                    placeholder="输入标题" 
                                    clearable
                                    style="width: 200px"
                                />
                            </el-form-item>
                            <el-form-item label="账号:">
                                <el-input 
                                    v-model="searchForm.account" 
                                    placeholder="输入账号" 
                                    clearable
                                    style="width: 200px"
                                />
                            </el-form-item>
                            <el-form-item label="发布时间:">
                                <el-date-picker
                                    v-model="searchForm.dateRange"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="请选择日期"
                                    end-placeholder="请选择日期"
                                    format="YYYY-MM-DD"
                                    value-format="YYYY-MM-DD"
                                    style="width: 240px"
                                />
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="search-right">
                        <el-button type="primary" @click="handleSearch">查询结果</el-button>
                    </div>
                </div>
            </el-card>
        </div>

        <!-- 新增内容按钮 -->
        <div class="add-section">
            <el-button type="success" @click="handleAddContent">新增内容</el-button>
        </div>

        <!-- 数据表格区域 -->
        <div class="table-section">
            <el-card shadow="never" class="table-card">
                <el-table 
                    :data="tableData" 
                    v-loading="loading"
                    stripe
                    border
                    style="width: 100%"
                >
                    <el-table-column type="index" label="序号" width="80" align="center" />
                    <el-table-column prop="title" label="标题" />
                    <el-table-column prop="expertName" label="专家名称" />
                    <el-table-column prop="account" label="账号" />
                    <el-table-column prop="content" label="内容" show-overflow-tooltip />
                    <el-table-column prop="category" label="分类" align="center">
                        <template #default="{ row }">
                            <el-tag :type="getCategoryType(row.category)">
                                {{ row.category }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="publishTime" label="发布时间" />
                    <el-table-column label="操作" width="200" align="center" fixed="right">
                        <template #default="{ row }">
                            <el-button type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
                            <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </div>

        <!-- 分页区域 -->
        <div class="pagination-section">
            <el-card shadow="never" class="pagination-card">
                <div class="pagination-content">
                    <div class="pagination-info">
                        <span>总共{{ pagination.total }}条记录,当前在第{{ pagination.current }}页</span>
                    </div>
                    <el-pagination
                        v-model:current-page="pagination.current"
                        :page-size="pagination.size"
                        :total="pagination.total"
                        :page-sizes="[10, 20, 50, 100]"
                        layout="prev, pager, next, jumper"
                        @current-change="handlePageChange"
                        @size-change="handleSizeChange"
                    />
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';

const router = useRouter();

// 搜索表单
const searchForm = reactive({
    title: '',
    account: '',
    dateRange: []
});

// 表格数据
const loading = ref(false);
const tableData = ref([
    {
        title: '图文标题',
        expertName: '专家1',
        account: '1734584485',
        content: '文章内容XXXXXXXXXXXXXXXXXXX',
        category: '视频分类',
        publishTime: '2020/7/18 16:55:22'
    },
    {
        title: '服务商2',
        expertName: '专家2',
        account: '1734584488',
        content: '文章内容XXXXXXXXXXXXXXXXXXX',
        category: '图文分类',
        publishTime: '2020/7/18 16:55:22'
    },
    {
        title: '服务商3',
        expertName: '专家3',
        account: '1734584489',
        content: '文章内容XXXXXXXXXXXXXXXXXXX',
        category: '图文分类',
        publishTime: '2020/7/18 16:55:22'
    },
    {
        title: '服务商4',
        expertName: '专家4',
        account: '1734584490',
        content: '文章内容XXXXXXXXXXXXXXXXXXX',
        category: '图文分类',
        publishTime: '2020/7/18 16:55:22'
    },
    {
        title: '服务商5',
        expertName: '专家5',
        account: '1734584491',
        content: '文章内容XXXXXXXXXXXXXXXXXXX',
        category: '图文分类',
        publishTime: '2020/7/18 16:55:22'
    },
    {
        title: '服务商6',
        expertName: '专家6',
        account: '1734584492',
        content: '文章内容XXXXXXXXXXXXXXXXXXX',
        category: '图文分类',
        publishTime: '2020/7/18 16:55:22'
    },
    {
        title: '服务商7',
        expertName: '专家7',
        account: '1734584493',
        content: '文章内容XXXXXXXXXXXXXXXXXXX',
        category: '图文分类',
        publishTime: '2020/7/18 16:55:22'
    },
    {
        title: '服务商8',
        expertName: '专家8',
        account: '1734584494',
        content: '文章内容XXXXXXXXXXXXXXXXXXX',
        category: '图文分类',
        publishTime: '2020/7/18 16:55:22'
    },
    {
        title: '服务商9',
        expertName: '专家9',
        account: '1734584495',
        content: '文章内容XXXXXXXXXXXXXXXXXXX',
        category: '图文分类',
        publishTime: '2020/7/18 16:55:22'
    },
    {
        title: '服务商16',
        expertName: '专家16',
        account: '1734584512',
        content: '文章内容XXXXXXXXXXXXXXXXXXX',
        category: '图文分类',
        publishTime: '2020/7/18 16:55:22'
    },
    {
        title: '服务商20',
        expertName: '专家20',
        account: '1734584516',
        content: '文章内容XXXXXXXXXXXXXXXXXXX',
        category: '图文分类',
        publishTime: '2020/7/18 16:55:22'
    }
]);

// 分页数据
const pagination = reactive({
    current: 1,
    size: 10,
    total: 140694
});

// 获取分类类型
const getCategoryType = (category: string) => {
    const categoryMap: { [key: string]: string } = {
        '视频分类': 'success',
        '图文分类': 'primary'
    };
    return categoryMap[category] || 'info';
};

// 搜索方法
const handleSearch = () => {
    loading.value = true;
    // 模拟搜索请求
    setTimeout(() => {
        loading.value = false;
    }, 1000);
};

// 分页方法
const handlePageChange = (page: number) => {
    pagination.current = page;
    loading.value = true;
    // 模拟分页请求
    setTimeout(() => {
        loading.value = false;
    }, 500);
};

const handleSizeChange = (size: number) => {
    pagination.size = size;
    pagination.current = 1;
    loading.value = true;
    // 模拟分页请求
    setTimeout(() => {
        loading.value = false;
    }, 500);
};

// 新增内容
const handleAddContent = () => {
    router.push('/video-image-form');
};

// 编辑内容
const handleEdit = (row: any) => {
    router.push(`/video-image-form/${row.index}`);
};

// 删除内容
const handleDelete = (row: any) => {
    ElMessageBox.confirm(
        `确定要删除内容 "${row.title}" 吗？`,
        '删除确认',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        ElMessage.success('删除成功');
        // 这里可以调用删除API
    }).catch(() => {
        ElMessage.info('已取消删除');
    });
};

// 页面初始化
onMounted(() => {
    // 可以在这里加载初始数据
});
</script>

<style scoped>
.video-image-list-container {
    padding: 20px;
}

/* 搜索区域 */
.search-section {
    margin-bottom: 20px;
}

.search-card {
    border-radius: 8px;
}

.search-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search-form {
    margin: 0;
}

.search-form .el-form-item {
    margin-bottom: 0;
}

.search-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 新增按钮区域 */
.add-section {
    margin-bottom: 20px;
}

/* 表格区域 */
.table-section {
    margin-bottom: 20px;
}

.table-card {
    border-radius: 8px;
}

/* 分页区域 */
.pagination-section {
    margin-bottom: 20px;
}

.pagination-card {
    border-radius: 8px;
}

.pagination-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

.pagination-info {
    color: #606266;
    font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .video-image-list-container {
        padding: 10px;
    }
    
    .search-content {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    
    .search-form {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .pagination-content {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }
}
</style>
